import React, { Component } from 'react';
import style from './housetype.module.css'
import { Tabs } from 'antd-mobile';
import { RightOutlined } from '@ant-design/icons';
const tabs = [
    { title: '3室(1)' },
    { title: '4室(1)' },
    { title: '别墅(1)' },
    { title: '洋房(2)' },
  ];
class Housetype extends Component {
    render() {
        return (
            <div className={style.big}>
                <span>查看全部<RightOutlined /></span>
                <span>户型查看</span >

                <div className={style.box}>
                <Tabs tabs={tabs} initialPage={0} animated={false} useOnPan={false} swipeable={false}>
                {/* <div style={{ display: 'flex', alignItems: 'center', height: '5rem', backgroundColor: '#fff' ,overflow: 'auto', whiteSpace: 'nowrap'}}> */}
                <div className={style.tab}>
                    <div className={style.rank}>
                        <div className={style.photo}>
                            <img src="http://www.zzpinfangwang.cn/file/upload/201902/25/1915433118.jpg"></img>
                        </div>
                        <p>3室2厅2卫<span>待定</span></p>
                        <p>暂无数据</p>
                        <p>待定</p>
                        <span>一键咨询房贷首付</span>
                    </div>
                </div>
                
                <div className={style.tab}>
                    <div className={style.rank}>
                        <div className={style.photo}>
                            <img src="http://www.zzpinfangwang.cn/file/upload/201902/25/1915433118.jpg"></img>
                        </div>
                        <p>4室2厅2卫<span>待定</span></p>
                        <p>暂无数据</p>
                        <p>待定</p>
                        <span>一键咨询房贷首付</span>
                    </div>
                </div>

                <div className={style.tab}>
                    <div className={style.rank}>
                        <div className={style.photo}>
                            <img src="http://www.zzpinfangwang.cn/file/upload/201902/25/1915433118.jpg"></img>
                        </div>
                        <p>别墅<span>待定</span></p>
                        <p>暂无数据</p>
                        <p>待定</p>
                        <span>一键咨询房贷首付</span>
                    </div>
                </div>

                <div className={style.tab}>
                    <div className={style.rank}>
                        <div className={style.photo}>
                            <img src="http://www.zzpinfangwang.cn/file/upload/201902/25/1915433118.jpg"></img>
                        </div>
                        <p>洋房1<span>待定</span></p>
                        <p>暂无数据</p>
                        <p>待定</p>
                        <span>一键咨询房贷首付</span>
                    </div>
                    <div className={style.rank}>
                        <div className={style.photo}>
                            <img src="http://www.zzpinfangwang.cn/file/upload/201902/25/1915433118.jpg"></img>
                        </div>
                        <p>洋房2<span>待定</span></p>
                        <p>暂无数据</p>
                        <p>待定</p>
                        <span>一键咨询房贷首付</span>
                    </div>
                </div>
                
                
                </Tabs>
                </div>
            </div>
        );
    }
}

export default Housetype;